<template>
  <!-- wss -->
  <div ref="pdom" class="cam-box" v-show="_showed" onmousedown="javascript:hMouseDown(event);">
    <div class="head">
      <label style="letter-spacing: 2px">{{ showName || '... ...' }}</label>

      <a class="reconn" href="javascript:;" @click="hCallIn.hOpenByName(showName)">刷新</a>
      <!-- <a href="javascript:;" class=" " style="pointer-events: all;" @click="hProject">{{isProj?"关闭":"查看"}}投影</a> -->
      <div class="btn bclose" @click="_showed = false">Ｘ</div>
    </div>

    <div class="body">
      <div class="vbox" :class="{ rcx: _codes.length == 2 }">
        <div
          id="videoDomMat"
          ref="domVideo"
          class="player"
          controls="controls"
          v-show="!isProj"
        ></div>
        <div ref="domRCX" class="player" controls="controls" v-show="_codes.length == 2"></div>
        <div class="msg">
          {{ msg }}
        </div>
      </div>
      <div class="ctrl">
        <div class="ybg" v-if="cCtrl.dat">
          <div :class="cCtrl.dat[4].cls" @mousedown="cCtrl.dat[4].hB(icode)">
            <!-- {{cCtrl.dat[4].name}} -->
          </div>
          <div :class="cCtrl.dat[2].cls" @mousedown="cCtrl.dat[2].hB(icode)">
            <!-- {{cCtrl.dat[2].name}} -->
          </div>
          <div :class="cCtrl.dat[3].cls" @mousedown="cCtrl.dat[3].hB(icode)">
            <!-- {{cCtrl.dat[3].name}} -->
          </div>
          <div :class="cCtrl.dat[5].cls" @mousedown="cCtrl.dat[5].hB(icode)">
            <!-- {{cCtrl.dat[5].name}} -->
          </div>
          <!-- v-for="btn in cCtrl?.dat" @mousedown="btn.hB(icode)" @mouseup="btn.hE(icode)"
					{{btn.name}} -->
        </div>
        <div class="zoom">
          <div :class="cCtrl.dat[0].cls" @mousedown="cCtrl.dat[0].hB(icode)">
            {{ cCtrl.dat[0].name }}
          </div>
          <div :class="cCtrl.dat[1].cls" @mousedown="cCtrl.dat[1].hB(icode)">
            {{ cCtrl.dat[1].name }}
          </div>
        </div>

        <div class="vb btn b" @click="hCallIn.hOpenAudio">广播</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted, nextTick, computed, reactive, watch, ref, toRefs } from 'vue'
import { useStore } from 'vuex'
import { ElMessage, ElMessageBox } from 'element-plus'

import { Play } from './m3u8Play.js'

import { eCtrlType, CtrlCam } from './ctrl.js'

const store = useStore()

const { openProj, datCamAreas, camName, datCams, api, showAudio } = toRefs(store.state)

function hMap() {
  return window.__map
}
const _showed = ref(false)
const icode = ref('') /*监控的id 用于云平台控制*/
const domv = ref('')
const showName = ref('')
let gArea = null

const domVideo = ref(),
  domRCX = ref()

let cPlay = null /*-----------------------可见光--------------*/,
  cPlayRcx = null /*-----------------------红外-----------------*/
const cCtrl = new CtrlCam({
  api: api.value
}) /*-----------云台控制器--------------*/

let isKeep = false

const msg = ref('')

let _ha = -1
const _codes = ref([])

//查看投影
let gProj = null
const isProj = ref(false)
const pdom = ref(null)

//事件抛出
//外层绑定@onFn="hOnFn"
const emit = defineEmits(['onFn', 'onUnSave'])
//触发
const hOnFn = (t) => {
  emit('onFn', t)
}

watch(_showed, (s) => {
  if (!s) {
    clearTimeout(_ha)
  }
})
watch(_codes, (codes) => {
  cPlay?.hStop()
  cPlay = new Play({
    dom: domVideo.value,
    back: () => {
      console.log('完成可见光初始化')
    }
  })

  cPlayRcx?.hStop()
  if (codes.length == 2) {
    cPlayRcx = new Play({
      dom: domRCX.value,
      back: () => {
        console.log('完成红外初始化')
      }
    })
  }
  //console.log("初始化完成");
  if (pdom.value?.style) {
    pdom.value.style.transform = 'translate(0px,0px)'
  }

  hCallIn.hRePlay()
})
const hCallIn = {
  hRePlay: () => {
    clearTimeout(_ha)
    if (_showed.value) {
      api.value.hServerCamPlay(_codes.value, hCallIn.hPlay)
    }
  },
  hPlay: (urls) => {
    clearTimeout(_ha)
    if (!isKeep) {
      _showed.value = true
      if (pdom.value?.style) {
        pdom.value.style.transform = 'translate(0,50px)'
      }

      /*url1:可见光,url2:热成像
				wss://210.83.70.93:8443/camera_hls_proxy/camera_app_18258478375/122_2_2_1_0_5523c065bc0958d516c6a827bfb27f67.live.flv
				wss://210.83.70.93:8443/camera_hls_proxy/camera_app_18258478375/122_2_2_1_0_5523c065bc0958d516c6a827bfb27f67.live.flv
				*/
      cPlay.hPlay(urls[0])
      if (urls[1]) {
        cPlayRcx.hPlay(urls[1])
      }

      msg.value = ''
    }
    console.log('维持', isKeep, urls)
    _ha = setTimeout(() => {
      isKeep = true
      hCallIn.hRePlay()
    }, 1000 * 20)
  },
  hOpenByName: (n) => {
    if (gArea) {
      gArea.remove()
    }
    clearTimeout(_ha)
    isKeep = false
    showName.value = n
    msg.value = `正在请求地址【${n}】`

    //store.state.camName = n;
    console.log('打开监控', n)
    if (!n) {
      //_showed.value = false;
      return
    }
    _showed.value = true
    hCallIn.hShowArea(n)

    let nk = n
    let ix = n.match(/[0-9]*(号塔|号杆)/g)
    if (ix && ix.length > 0) {
      nk = ix[0]
    }
    let cam = datCams.value.find((t) => t.name.indexOf(nk) == 0)
    console.log('查看监控', cam)
    if (!cam) {
      ElMessage.error('监控打开异常' + n)
    }
    showName.value = cam?.name
    let c = [cam?.code]
    if (cam?.code2) {
      c.push(cam?.code2)
    }
    _codes.value = c
    icode.value = cam?.id // _codes[0];
    if (showAudio.value) {
      hCallIn.hOpenAudio()
    }
  },
  hShowArea: (v) => {
    //监控范围
    let n = v || showName.value

    if (gArea) {
      gArea.remove()
    }
    let datArea = datCamAreas.value.find((t) => t.Other == n)
    if (datArea) {
      let geojson = JSON.parse(datArea.Json)
      geojson.properties.datId = datArea.ID
      gArea = hMap().hAddObject(geojson)
    } else {
      console.log('无区域数据', n, datArea)
    }
  },
  hOpenAudio: () => {
    store.commit('hShowAudio', showName.value)
  }
}

//投影开启
watch(openProj, (isproj) => {
  if (isproj) {
    _showed.value = false
  } else {
    cPlay?.hStop()
    cPlayRcx?.hStop()
  }
})
watch(_showed, (s) => {
  isProj.value = false
  isKeep = false
  if (!s) {
    gArea?.remove()
    clearTimeout(_ha)
    cPlay?.hStop()
    cPlayRcx?.hStop()
    store.state.openProj = false
    store.state.camName = ''
  }
})

const hProject = () => {
  let n = showName.value // camName.value;
  if (gArea) {
    gArea.remove()
  }
  if (gProj) {
    gProj.remove()
  }
  if (isProj.value) {
    isProj.value = false
    hCallIn.hShowArea(n)
    return
  }
  let datArea = datCamAreas.value.find((t) => t.Other == n)
  isProj.value = datArea ? true : false
  if (datArea) {
    let geojson = JSON.parse(datArea.Json)
    let parr = geojson.geometry.coordinates

    console.log('投影区域数据', parr)
    let v = domVideo.value
    gProj = hMap().hSetProjection(parr, v)
  } else {
    console.log('无区域数据', n, datArea)
  }
}
watch(isProj, (v) => {
  if (!v) {
    gProj.remove()
  }
})

//属性导出
//使用方法 ref="rdom" rdom.value.hFn()
defineExpose({
  hCallIn
})

//属性定义
//数据绑定v-bind:dat="dat"
//const dat=ref({});
const props = defineProps({
  dat: {
    type: Object
  } //概况
})
</script>

<style scoped lang="scss">
.vbox {
  position: relative;
}

.msg {
  position: absolute;
  text-align: center;
  width: 100%;
  font-size: 14px;
  top: 0px;
}

.reconn {
  pointer-events: all;
  cursor: pointer;
  letter-spacing: 3px;
}

.cam-box {
  position: absolute;
  height: 300px;
  z-index: 2;
  top: 280px;
  right: 460px;
  color: #eee;
  font-size: 20px;
  background-color: rgb(30 58 88 / 73%);
  border-radius: 10px;
  border: 2px solid #2a67c29a;

  .head {
    height: 30px;
    line-height: 26px;
    pointer-events: none;

    a {
      font-size: 13px;
      margin: 0 12px;
    }

    .bclose {
      pointer-events: all;
      float: right;
      line-height: 16px;
      margin: 0 12px 0;
      height: 30px;
      width: 26px;
      color: #eee;
      background: rgba(30, 58, 88, 0.83);
      transform: scaleY(0.8);
      display: flex;
      justify-content: center;
      font-size: 20px;
      font-family: '';
      border: 1px solid #7e8795;
    }

    .bclose:hover {
      color: red;
    }
  }

  .body {
    width: 100%;
    height: calc(100% - 50px);
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 12px;
    margin: 0 auto;
  }

  .ctrl {
    width: 180px;
    height: 100%;
    font-size: 18px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    background: #03345faa;
    border-radius: 10px;
    padding: 8px;
    margin-left: 8px;

    > div {
      // background-color: #aa5500;
      margin: 3px;
      padding: 3px 6px;
    }

    .ybg {
      width: 126px;
      height: 126px;
      background-image: url(/imgs/hkvideo/dir-bg.png);
      background-size: 100% 100%;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-content: space-around;
      justify-content: space-around;
      transform: rotate(315deg);
    }

    .vb {
      background-size: calc(100% - 2px) calc(100% - 2px);
      background-position: center;
      background-repeat: no-repeat;
    }

    .vb:hover {
      box-shadow: 1px 1px 3px black;
    }

    .ybg .vb:hover {
      box-shadow: unset;
      filter: drop-shadow(1px 2px 3px black);
    }

    .zoom {
      display: flex;
      height: 40px;
      line-height: 40px;
      width: 100%;
      padding: 0;
      margin: 0;
      color: #58d2ff;
    }

    .v-dir {
      background-image: url(/imgs/hkvideo/dir.png);
      width: 20px;
      height: 28px;
      margin: 10%;
      cursor: pointer;
    }

    .v-up {
      transform: rotate(132deg);
    }

    .v-down {
      transform: rotate(315deg);
    }

    .v-left {
      transform: rotate(45deg);
    }

    .v-right {
      transform: rotate(227deg);
    }

    .v-in,
    .v-out {
      width: 50%;
      text-align: right;
      height: 100%;
      padding-right: 10px;
      background-size: auto;
      background-position: left;
      background-position-x: 10px;
      background-color: #5981bd5a;
      border-radius: 10px;
      margin: 0 2px;
    }

    .v-in {
      background-image: url(/imgs/hkvideo/s-.png);
    }

    .v-out {
      background-image: url(/imgs/hkvideo/s.png);
    }
  }

  .rcx {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .player {
    width: 350px;
    height: 100%;
    margin: 0;
    object-fit: fill;
    background-color: #222;
    border: 2px solid #226ad59a;
    margin: 0 1px;
  }

  .btn.b {
    font-size: 18px;
    width: 100%;
    height: 42px;
    line-height: 36px;
    right: 10px;
    bottom: 6px;
    border-radius: 10px;

    background: #5981bd5a;
    // url(/imgs/hkvideo/bobg.png);
    background-size: calc(100% + 2px) calc(100% + 2px);
    background-position: center;
    letter-spacing: 6px;
    color: #98e8fb;
    font-weight: bold;
  }

  .btn.b:hover {
    color: #04ff00;
  }

  label {
    font-size: 14px;
    letter-spacing: 2px;
  }
}
</style>
